<template>
	<div class="login-editor">
		<div class="container">
			<div  style="text-align:left"></div>
			<!-- <h1 class="page-item">编辑器</h1> -->
			文章标题：
			<textarea id="title" v-model="title" placeholder="   请输入文章标题"></textarea>
			<div>
				文章分类：
				<select v-model="classification">
					<option value="">---请选择分类---</option>
					<option v-for="clafication in classifications" :value=clafication.cfcId>{{clafication.cfcContest}}</option>
				</select>

			</div>
			<div>
				文章标签：
				<ul id="lable">
					<li v-for="lable in lables" @click="setLable1(lable)">{{lable}}</li>
				</ul><br/>
				<button id="newlable" @click="setLable">添加新标签</button>
				<textarea id="inputlable" v-model="lable" onkeyup="this.value=this.value.replace(/\s+/g,'')" placeholder="   请输入标签名"></textarea>
			</div>
			<p id="date" v-model="date">当前时间为：{{ date }}</p>
			<div id="listlable">
				<li v-for="(sel,index) in selectlable" @click="delLable(index,sel)">{{sel}} X</li>
			</div>
			<!-- 文章内容 -->
			<div id="editorElem" class="text" v-model="editorContent">
				<P v-html="html"></P>
			</div>
			<!-- 获取文本内容按钮 -->
			<button id="Obtainfb" v-on:click="getContent">发布文章</button>
			<!-- 滴滴答答滴滴答 -->
		</div>
	</div>
</template>

<!-- 脚本区域 -->
<script>
	import E from 'wangeditor'

	export default {
	      name: 'editor',
	      data () {
	        return {
			  urlfix:"http://localhost:9000",
			  html:"",
	          editorContent: '',
			  title:'',
			  classification:'',
			  lable:'',
			  date:'',
			  selectlable:[],
			  lables:[],
			  classifications:[],
			  returnData:[]
	        }
	      },
		  created() { //当vm实例得data和methods初始化完毕之后 vm实例会自动执行
				this.getLable(),
				this.getclassification(),
				this.currentTime()
				this.getEdit()
				// this.sensitiveWord()
				// this.getEditInfo()
		  },
		  //初始化编辑器
		  mounted() {
		    var editor = new E('#editorElem')
		    editor.customConfig.onchange = (html) => {
		      this.editorContent = html
		    }
			// editor.customConfig.uploadImgServer = '<%=path%>/Img/upload'; //上传URL
			editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
		    editor.create()
		  },
	      methods: {
			//发布文章按钮
	        getContent: function () {
				// alert('时间：'+this.date),
				// alert('分类：'+this.classification),
				// alert('标签：'+this.selectlable),
				// console.log('标题：'+this.title),
				// console.log('文章内容：'+this.editorContent)

				let then = this
				let url = then.urlfix+"/hjk/article/commit"
				var userid = window.sessionStorage.getItem('userId')
				var userEmail = window.sessionStorage.getItem('userEmail')
				var contents = this.editorContent
				//当内容或者标题为空时，不能发布
				if(this.editorContent=="" || this.title==""){
					alert("标题或内容不能为空！")
				}else{
					//发布成功 存到数据库
					$.ajax({
						url: url,
						data: {
							"userId":userid,
							"userEmail":userEmail,
							"articleTitle":then.title,
							"articleLable":then.selectlable.toString(),
							"cfcId":then.classification,
							"articleTime":then.date,
							"content":then.editorContent,
						},
						
						dataType: 'json', //服务器返回json格式数据
						type: 'post', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						success: function(data) {
							console.log(data);
							//如果返回的data中flag为true
							if(data.flag){
								alert("发布成功！")
								then.$router.push({path:"/content/" + data.message});
							}else{
								alert(data.message)
							}
						},
						error: function() {
							alert("发布失败！");
						}
					});
				}
	        },
			// //获得数据库标签
			getclassification: function(){
			  var userid = window.sessionStorage.getItem('userId');
			  // alert(userid)
			  this.axios.get('http://localhost:9000/hjk/articleEdit/'+userid).then(res => {
				  let lables = res.data.data.lable;
				  // alert(window.sessionStorage.getItem('userid'));
				  this.lables = lables
			  })
			},
			//获得数据库分类
			getLable: function(){
			  var userid = window.sessionStorage.getItem('userId');
			  // alert(userid)
			  this.axios.get('http://localhost:9000/hjk/articleEdit/'+userid).then(res => {
				  let classfi = res.data.data.class;
				  this.classifications = classfi
			  })
			},
			//获取要编辑的文章内容
			getEdit: function(){
				if(this.$route.params.articleid==0){
				  return
				}
				this.axios.get('http://localhost:9000/hjk/editArticleContent/'+this.$route.params.articleid).then(res =>{
					this.html = res.data
					// alert(this.editorContent)
				})
			},
			// //获取要编辑的文章信息
			// getEditInfo: function(){
			// 	if(this.$route.params.articleid==0){
			// 	  return
			// 	}
			// 	this.axios.get('http://localhost:9000/hjk/editArticle/'+this.$route.params.articleid).then(res =>{
			// 		this.title = res.data.articleTitle
			// 		alert(this.title)
			// 	})
			// },
			//设置新标签按钮
			setLable: function(){
				var a=this.lable;
				if (a==""){
					alert("标签内容为空！")
				}else{
					this.selectlable.push(a),
					this.lable=""
				}
			},
			//单击已有标签按钮
			setLable1: function(text){
				this.selectlable.push(text)
			},
			//删除已选标签
			delLable: function(index,lab){
				this.selectlable.splice(index,1)
			},
			currentTime() {
				setInterval(()=>{
					this.getDate()
				},1000);
			},
			getDate: function() {
				var _this = this;
				let yy = new Date().getFullYear(); //年
				let mm = new Date().getMonth() + 1; //月
				let dd = new Date().getDate(); //日
				let week = new Date().getDay(); //星期
				let hh = new Date().getHours(); //时
				//分
				let mf =
					new Date().getMinutes() < 10
						? "0" + new Date().getMinutes()
						: new Date().getMinutes();
				if (week == 1) {
					this.nowWeek = "星期一";
				} else if (week == 2) {
					this.nowWeek = "星期二";
				} else if (week == 3) {
					this.nowWeek = "星期三";
				} else if (week == 4) {
					this.nowWeek = "星期四";
				} else if (week == 5) {
					this.nowWeek = "星期五";
				} else if (week == 6) {
					this.nowWeek = "星期六";
				} else {
					this.nowWeek = "星期日";
				}
				_this.date = yy + "/" + mm + "/" + dd + ' ' + hh + ":" + mf + ' ' + _this.nowWeek
			}
	      },
	    }
</script>

<style scoped>
	html{
		margin: 0 auto;
		width: 100%;
	}
	.toolbar {
	    border: 1px solid #ccc;
	}
	.text {
		border: 1px solid #ccc;
	}
	#lable{
		list-style: none;
		display: inline-block;
	}
	#date{
		display: inline-block;
	}
	#lable li{
		cursor:pointer;
		margin: 0 6px;
		font-size: 13px;
		border: solid #002752 1px;
		padding: 3px 3px;
		background-color: #9FCDFF;
		display: inline-block;
	}
	#newlable{
		position: relative;
		margin-bottom: 10px;
		margin-left: 80px;
		height: 30px;
		padding: 2px;
	}
	#inputlable{
		position:absolute;
		/* 去除拖动改变大小 */
		resize: none;
		/* 去除滚动条 */
		overflow: hidden;
		display: inline-block;
		width: 30%;
		height: 30px;
		line-height: 30px;
		color: black;
		font-size: 14px;
	}
	#listlable{
		margin-top: 10px;
		font-size: 13px;
		float: right;
		display: inline-block;
	}
	#listlable li{
		cursor:pointer;
		margin: 0 6px;
		font-size: 13px;
		border: solid #002752 1px;
		padding: 3px 3px;
		background-color: #9FCDFF;
		display: inline-block;
	}
	#listlable textarea{
		resize: none;
	}
	#title{
		/* 去除拖动改变大小 */
		resize: none;
		/* 去除滚动条 */
		overflow: hidden;
		display: inline-block;
		margin-top: 20px;
		width: 50%;
		height: 30px;
		line-height: 30px;
		color: black;
		font-weight: bold;
		font-size: 16px;
	}
	#Obtainfb{
		margin: 10px 0;
		display: inline-block;
		background-color: #B3B7BB;
		border: 1px solid #CCC;
		border-radius: 10px;
		height: 40px;
		width: 150px;
		font-size: 18px;
	}
	select{
		height: 30px;
		width: 50%;
		margin: 8px 0;
	}

</style>
